<template>
  <div>
    <div style="display: flex; justify-content: flex-end;">
      <div class="userInfo" >
        <div class="circle-avatar"><img src="../../assets/img/avatar_small.jpg"></div>
        <div style="text-align: center; margin-top: 20px; color: #353535;">
          <p style="height: 20px" v-if="this.$route.query.managerType === '1'">普通管理员</p>
          <p style="height: 20px" v-else>超级管理员</p>
          <p style="height: 20px">{{notesId}}</p>
          <a style="color: #888888; position: relative; top: 10px; left: -20px;" @click="logout">切换账号</a>
          <a style="color: #888888; position: relative; top: 10px; right: -20px;" @click="logout">退出登录</a>
        </div>
      </div>
    </div>
    <div class="admin-box">
      <div class="circle-avatar"><img src="../../assets/img/avatar.jpg"></div>
      <div style="position: relative; margin: 30px; color: #353535; font-size: 16px;"><span v-if="this.$route.query.managerType === '1'">普通</span><span v-else>超级</span>管理员（notesID:{{this.$route.query.notesId}}）</div>
    </div>
    <div style="display: flex; flex-direction: column; width:300px; text-align: center; font-size: 16px; color: #353535;">
      <div style="">{{this.$route.query.costCenter}}</div>
      <div>{{this.$route.query.department}}</div>
      <div>{{this.$route.query.userName}}</div>
    </div>
  </div>

</template>
<script>
  import Cookies from 'js-cookie'
  export default {
    data () {
      return {
        notesId: sessionStorage.getItem('notesId')
      }
    },
    methods: {
      logout () {
        console.log('退出')
        Cookies.remove('token')
        this.$router.push('/login')
        this.$Message.success('退出成功')
      }
    }
  }
</script>
<style>
  .userInfo {
    background: #ECECEC;
    border-radius: 4px;
    font-size: 12px;
    position: relative;
    width: 200px;
    height: 150px;
    top: 0px;
    box-shadow: 1px 2px 8px rgba(0, 0, 0, .1);
  }
  .circle-avatar {
    position: relative;
    margin-left: 100px;
    top: -10px;
    width: 100px;
    height: 100px;
    box-shadow: 1px 2px 8px rgba(0, 0, 0, .1);
    border-radius: 50%;
    opacity: 100%;
    overflow: hidden;
  }
  .userInfo .circle-avatar {
    position: relative;
    margin: 0 auto;
    top: 10px;
    width: 50px;
    height: 50px;
    box-shadow: 1px 2px 8px rgba(0, 0, 0, .1);
    border-radius: 50%;
    overflow: hidden;
  }
  .admin-box {
    display: flex;
    width: 900px;
  }
  .admin-box-item {
    flex: none;
    position: relative;
    margin: 0 20px;
  }
</style>
